<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <title>Gridster Responsive Demo</title>
    <link rel="stylesheet" type="text/css" href="demo.css">
    <link rel="stylesheet" type="text/css" href="/scripts/gridster.js/jquery.gridster.min.css">
    <script src="/scripts/jquery/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/scripts/gridster.js/jquery.gridster.min.js" type="text/javascript" charset="utf-8"></script>
 
    <script type="text/javascript">
        var gridster = null;
        $(document).ready(function () {
            gridster = $(".gridster ul").gridster({
                widget_base_dimensions: ['auto', 140],
                autogenerate_stylesheet: true,
                min_cols: 1,
                max_cols: 6,
                widget_margins: [5, 5],
                resize: {
                    enabled: true
                }
            }).data('gridster');
            $('.gridster  ul').css({'padding': '0'});
        });
    </script>
</head>
<body>
<div class="content">
    <h1>Responsive Layout</h1>
    <p>This demo represents using the branch in responsive mode. This makes the grid as wide as the screen and responds to changes in browser
        width.</p>
</div>
<div class="gridster">
    <ul>
        <li data-sizey="2" data-sizex="2" data-col="4" data-row="1">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="1" data-row="3">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="2" data-row="3">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="2" data-sizex="2" data-col="1" data-row="1">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="3" data-row="1">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="3" data-row="3">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="4" data-row="3">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="6" data-row="1">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="5" data-row="3">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="3" data-row="2">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
        <li data-sizey="1" data-sizex="1" data-col="6" data-row="2">
            <div class="gridster-box">
                <div class="handle-resize"></div>
            </div>
        </li>
    </ul>
</div>


</body>
</html>
